<script setup lang="ts">
import type { FormRules, FormInstance } from 'element-plus'
import { Unlock } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { notify } from '@/utils/element'
import { isUsername, isPassword } from '@/utils/validate'
import { useAuthStore } from '@/store/auth'

/**
 * 路由
 */
const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

/**
 * 初始参数
 */
const state = reactive({
  isRemember: true,
  loading: false,
  loginData: {
    username: authStore.rememberData?.username,
    password: authStore.rememberData?.password,
  } as LoginData
})

/**
 * 表单规则
 */
const rules = reactive<FormRules>({
  username: [{ required: true, asyncValidator: checkUserName, trigger: 'blur' }],
  password: [{ required: true, asyncValidator: checkPassword, trigger: 'blur' }]
})

/**
 * 校验账号
 * @param _rule 
 * @param value 
 * @param callback 
 */
async function checkUserName(_rule: any, value: string, callback: Function) {
  if (!value) return callback(new Error('请输入有效账号/手机号！'))
  if (!isUsername(value)) callback(new Error('输入的格式不正确，请重新输入3-30位数字、字母和下划线！'))
  callback()
}

/**
 * 校验密码
 * @param _rule 
 * @param value 
 * @param callback 
 */
async function checkPassword(_rule: any, value: string, callback: Function) {
  if (!value) return callback(new Error('请输入有效密码！'))
  if (!isPassword(value)) callback(new Error('输入的格式不正确，请重新输入字母+数字+特殊字符，长度在6-30之间！'))
  callback()
}

const { loading, loginData } = { ...toRefs(state) }

/**
 * 提交数据
 */
const formRef = ref<FormInstance>()
function submitForm() {
  formRef.value?.validate(async (valid) => {
    if (!valid) return
    try {
      //登陆中
      loading.value = true

      // 发送登录请求
      const res: any = await authStore.userLogin(state.loginData)
      // console.log('发送登录请求', res)

      // 记住密码,持久化
      authStore.setRememberPwd(state.isRemember ? state.loginData : undefined)

      // 跳转到来源地址 login?redirect=/home
      console.log('route.query', route.query);
      router.replace({ path: <string>route.query?.redirect || '/' })
      notify(res.msg, { type: 'success', duration: 2000 });
    } catch (error) {
    } finally {
      loading.value = false
    }
  })
}
</script>

<template>
  <div class="w-full h-full flex items-center  bg-[url('@/assets/login-bg.webp')]">
    <div class="w-430px h-430px p-30px m-auto  bg-[#fff] border-rd-10px shadow-[#74747462_0_2px_15px]">
      <img class="w-260px h-60px m-auto flex" src="@/assets/logo.svg"></img>
      <div class="text-20px h-70px lh-70px font-550 text-center text-[#0d1234] tracking-2px">重置密码</div>
      <el-form ref="formRef" class="login-form" :model="loginData" size="large" :rules="rules">
        <el-form-item prop="password">
          <el-input v-model="loginData.password" type="password" placeholder="请输入新密码" maxlength="30"
            :prefix-icon="Unlock" show-password></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginData.password" type="password" placeholder="确认输入的密码" maxlength="30"
            :prefix-icon="Unlock" show-password></el-input>
        </el-form-item>
      </el-form>
      <el-button class="w-full h-40px tracking-3px font-500" type="primary" :loading="loading" @click="submitForm">
        {{ loading ? '正在提交...' : '提 交' }}
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-form>.el-form-item {
  margin-bottom: 27px;
}
</style>